<template>
  <div id="cpn-editor-field">
    <Toolbar style="border-bottom: 1px solid #ccc" ref="toolBar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor :style="{ height: height }" style=" overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig"
      :mode="mode" @onCreated="onCreated" />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
export default {
  name: 'editor-field',
  components: {
    Editor,
    Toolbar
  },
  props: {
    value: {
      typeof: String,
      default: ''
    },
    height: {
      typeof: String,
      default: 'calc(100% - 81px)'
    }
  },
  model: {
    prop: 'value',
    event: 'update'
  },
  computed: {
   
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        this.html = newVal
      }
    },
    html(newVal, oldVal) {
      this.$emit('update', newVal)
    }
    // 'this.$refs.toolBar': {
    //   handler(newVal) {
    //     console.log('height', newVal.$el.offsetHeight)
    //   },
    //   deep: true
    // }
  },
  data() {
    return {
      // baseImgDownLoadUrl: process.env.VUE_APP_DOWNLOAD_IMG_API,
      editor: null,
      html: '<p></p>',
      toolbarConfig: {
        excludeKeys: [
          'fullScreen'
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            fieldName: 'file',
            server: `${process.env.NODE_ENV === 'development' ? '/api/' : process.env.VUE_APP_BASE_API}common/upload/img`,
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 2 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            // meta: {
            //   token: 'xxx',
            //   otherKey: 'yyy'
            // },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers: {
              // Accept: 'multipart/form-data'
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 10 * 1000,
            customInsert(res, insertFn) {
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ，然后插入图片

              insertFn(`${process.env.VUE_APP_DOWNLOAD_IMG_API}${res.data.url}`)
            }
          },
          uploadVideo: {
            fieldName: 'file',
            server: `${process.env.NODE_ENV === 'development' ? '/api/' : process.env.VUE_APP_BASE_API}common/upload/video`,
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 100 * 1024 * 1024,
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 3,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            // meta: {
            //   token: 'xxx',
            //   otherKey: 'yyy'
            // },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers: {
              // Accept: 'text/x-json'
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 30 * 1000,
            customInsert(res, insertFn) {
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ，然后插入图片

              insertFn(`${process.env.VUE_APP_DOWNLOAD_VIDEO_API}${res.data.url}`)
            }
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  mounted() {
    // this.initMenu()
    window.chy = this
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(() => {
        const toolbar = DomEditor.getToolbar(editor)
        const curToolbarConfig = toolbar.getConfig()
        // console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
      })
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
#cpn-editor-field {
  height: 100%;
  border: 1px solid $font3;
}
</style>